{extend name="common/layout" /}

{block name="style"}
<style>
    .engine { display: none; }
    .engine.checked { display: block; }
    .layui-form-label { width: 140px !important; }
    .layui-input-block { margin-left: 170px !important; }
</style>
{/block}

{block name="body"}
<div class="container">
    <div class="layui-form">
        <!-- 存储设置 -->
        <div class="layui-card ">
            <div class="layui-card-header">存储设置</div>
            <div class="layui-card-body">
                <!-- 存储方式 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">存储方式</label>
                    <div class="layui-input-block">
                        <input type="radio" name="storage" lay-filter="storage" value="local" title="本地存储"   {if $detail.default=="local"}checked{/if}>
                        <input type="radio" name="storage" lay-filter="storage" value="qiniu" title="七牛云存储" {if $detail.default=="qiniu"}checked{/if}>
                        <input type="radio" name="storage" lay-filter="storage" value="aliyun" title="阿里云OSS" {if $detail.default=="aliyun"}checked{/if}>
                        <input type="radio" name="storage" lay-filter="storage" value="qcloud" title="腾讯云COS" {if $detail.default=="qcloud"}checked{/if}>
                    </div>
                </div>

                <!-- 七牛云存储 -->
                <div class="engine qiniu {$detail.default==='qiniu' ? 'checked' : ''}">
                    <!-- 存储空间名称 Bucket -->
                    <div class="layui-form-item">
                        <label for="qiniu_bucket" class="layui-form-label">存储空间名称 Bucket</label>
                        <div class="layui-input-block">
                            <input type="text" id="qiniu_bucket" name="qiniu_bucket" value="{$detail.qiniu.bucket}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- ACCESS_KEY AK -->
                    <div class="layui-form-item">
                        <label for="qiniu_ak" class="layui-form-label">ACCESS_KEY AK</label>
                        <div class="layui-input-block">
                            <input type="text" id="qiniu_ak" name="qiniu_ak" value="{$detail.qiniu.accessKey}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- SECRET_KEY SK -->
                    <div class="layui-form-item">
                        <label for="qiniu_sk" class="layui-form-label">SECRET_KEY SK</label>
                        <div class="layui-input-block">
                            <input type="text"  id="qiniu_sk" name="qiniu_sk" value="{$detail.qiniu.secretKey}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- 空间域名 Domain -->
                    <div class="layui-form-item">
                        <label for="qiniu_domain" class="layui-form-label">空间域名 Domain</label>
                        <div class="layui-input-block">
                            <input type="text" id="qiniu_domain" name="qiniu_domain" value="{$detail.qiniu.domain}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                </div>

                <!-- 阿里云OSS -->
                <div class="engine aliyun {$detail.default==='aliyun' ? 'checked' : ''}">
                    <!-- 存储空间名称 Bucket -->
                    <div class="layui-form-item">
                        <label for="aliyun_bucket" class="layui-form-label">存储空间名称 Bucket</label>
                        <div class="layui-input-block">
                            <input type="text" id="aliyun_bucket" name="aliyun_bucket" value="{$detail.aliyun.bucket}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- AccessKeyId -->
                    <div class="layui-form-item">
                        <label for="aliyun_ak" class="layui-form-label">AccessKeyId</label>
                        <div class="layui-input-block">
                            <input type="text" id="aliyun_ak" name="aliyun_ak" value="{$detail.aliyun.accessKey}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- AccessKeySecret -->
                    <div class="layui-form-item">
                        <label for="aliyun_sk" class="layui-form-label">AccessKeySecret</label>
                        <div class="layui-input-block">
                            <input type="text" id="aliyun_sk" name="aliyun_sk" value="{$detail.aliyun.secretKey}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- 空间域名 Domain -->
                    <div class="layui-form-item">
                        <label for="aliyun_domain" class="layui-form-label">空间域名 Domain</label>
                        <div class="layui-input-block">
                            <input type="text" id="aliyun_domain" name="aliyun_domain" value="{$detail.aliyun.domain}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                </div>

                <!-- 腾讯云COS -->
                <div class="engine qcloud {$detail.default==='qcloud' ? 'checked' : ''}">
                    <!-- 存储空间名称 Bucket -->
                    <div class="layui-form-item">
                        <label for="qcloud_bucket" class="layui-form-label">存储空间名称 Bucket</label>
                        <div class="layui-input-block">
                            <input type="text" id="qcloud_bucket" name="qcloud_bucket" value="{$detail.qcloud.bucket}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- SecretId -->
                    <div class="layui-form-item">
                        <label for="qcloud_ak" class="layui-form-label">SecretId</label>
                        <div class="layui-input-block">
                            <input type="text" id="qcloud_ak" name="qcloud_ak" value="{$detail.qcloud.accessKey}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- SecretKey -->
                    <div class="layui-form-item">
                        <label for="qcloud_sk" class="layui-form-label">SecretKey</label>
                        <div class="layui-input-block">
                            <input type="text" id="qcloud_sk" name="qcloud_sk" value="{$detail.qcloud.secretKey}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- 所属地域 Region -->
                    <div class="layui-form-item">
                        <label for="qcloud_region" class="layui-form-label">所属地域 Region</label>
                        <div class="layui-input-block">
                            <input type="text" id="qcloud_region" name="qcloud_region" value="{$detail.qcloud.region}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <!-- 空间域名 Domain -->
                    <div class="layui-form-item">
                        <label for="qcloud_domain" class="layui-form-label">空间域名 Domain</label>
                        <div class="layui-input-block">
                            <input type="text" id="qcloud_domain" name="qcloud_domain" value="{$detail.qcloud.domain}"
                                   class="layui-input" autocomplete="off">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 保存配置 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <button class="layui-btn layui-btn-default {:check_perms('save', false)}" lay-submit lay-filter="addForm">保存配置</button>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['form'], function () {
        let $ = layui.jquery;
        let form = layui.form;

        // 提交表单
        form.on('submit(addForm)', function(data){
            layer.confirm('确定保存当前配置吗?', function(index) {
                layer.close(index);
                waitUtil.ajax({
                    url: '{:route("setting.storage/save")}',
                    type: 'POST',
                    data: data.field
                });
            });
        });

        // 选择存储引擎
        form.on('radio(storage)', function (data) {
            $('.engine').removeClass('checked');
            $('.engine.'+data.value).addClass('checked');
        });
    });
</script>
{/block}